<html>
<head>
<script src="libs/strophe.min.js" ></script>
<script src="libs/strophe.muc.min.js" ></script>
<script src="libs/strophe.disco.min.js" ></script>
<script src="libs/strophe.jingle.sdp.js"></script>
<script src="libs/jquery-2.1.1.min.js"></script>
<script src="libs/EventEmitter.min.js" ></script>
<script src="xmppvideoroom.js" ></script>
<script src="xmppvideoroom.json" ></script>
<script src="webrtcstreamer.json" ></script>
<link rel="icon" type="image/ico" href="jitsi.ico" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body> 
	XMPP Url:<input id="xmppServer" type="text" size="50" /> 
	Room id:<input id="xmppRoom" type="text" />
	<input type="button" onclick="openroom()" value="OpenRoom" />
	<nav id="menu"></nav>
	<iframe src="jitsiroom.html" style="height:100%; width: 100%;"></iframe>
</body>
<script>
	// set default value
	document.querySelector('#xmppServer').value  = xmppRoomConfig.url;
	document.querySelector('#xmppRoom').value = xmppRoomConfig.roomId;
		
	// ------------------------------------------
	// XMPP connections
	// ------------------------------------------	
	var XMPPServerList = {};
	
	function getText(url) {
		var text;
		if (url.video) {
			text = url.video + " ";
		}
		if (url.audio) {
			text += url.audio + " ";
		}
		return text;
	}		
	// ------------------------------------------
	// init device list 
	// ------------------------------------------	
	function onGetDeviceList(remoteDeviceList) {
		var deviceList = [];
		if (remoteDeviceList) {
			deviceList.push.apply( deviceList, remoteDeviceList );
		}

		// create navigation menu
		var urllist = document.getElementById("menu");
		for (var dev in deviceList) {
			var url = deviceList[dev];
			var option = document.createElement("a");
			option.url = url;
			option.text = getText(url);
			option.id   = "nav_" + url.video;
			option.onclick = function () { 
				if (this.className === "active") {
					disconnect(this.url.video); 
				} else {
					connect(this.url, this.url.video); 
				}
			}
			urllist.appendChild(option);
		}		
	}		
	fetch(webrtcConfig.url + "/api/getMediaList").then(r => r.json()).then( (response) => { 
		onGetDeviceList(response);
	});
		
	function onPresence (name, status) {
		console.log("onPresence name:"+ name + " status:"+ status);
		var videoId = name.split('/')[1];
		var navId = "nav_" + videoId;
		var navElt = document.querySelector(`#${navId}`);
		if (navElt) {
			if (status == "out") {
				navElt.className = "";
			} else if (status == "in") {
				navElt.className = "active";
			}
		}
	}	

	var bus = new EventEmitter();
	bus.addListener('presence', onPresence);

	function getXMPPServer() {
		var serverName = document.querySelector('#xmppServer').value;

		if (!XMPPServerList[serverName]) {
			XMPPServerList[serverName] = new XMPPVideoRoom(serverName, webrtcConfig.url, bus);
		}
		var xmpp = XMPPServerList[serverName];	
		return xmpp;
	}	
	
	function connect(webrtcStream, xmppuser) {	
		var roomName = document.querySelector('#xmppRoom').value;	
		var xmpp = getXMPPServer();
		xmpp.join(roomName, webrtcStream, xmppuser);
	}
	
	function disconnect(xmppuser) {
		var roomName = document.querySelector('#xmppRoom').value;	
		var xmpp = getXMPPServer();
		if (xmpp) {
			xmpp.leave(roomName, xmppuser);
		}
	}
	
	function openroom() {
		var serverName = document.querySelector('#xmppServer').value;
		var roomName = document.querySelector('#xmppRoom').value;		
		window.open( location.protocol + "//" + serverName + "/" + roomName);
	}
	
	var roomName = document.querySelector('#xmppRoom').value;	
	var xmpp = getXMPPServer();
	xmpp.query(roomName);		
	
	window.onbeforeunload = function() { 
		console.log(Object.entries(XMPPServerList))
		Object.entries(XMPPServerList).forEach( ([serverName, xmpp]) => {
			xmpp.leaveAll();
		});
	};		
</script>
</html>